{% extends "base.html" %}
{% load staticfiles %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
    <!-- 审批的模态框 -->
    <div class="modal fade" data-backdrop="static" id="modal_approval">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">确认审批策略</h4>
                </div>
                <div class="modal-body">
                    <div id="confirm" style="margin-top:3%; display: block"></div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="fad_approval()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="approval" sid="" class="btn-confirm btn-stc" onclick="stg_approval()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 驳回的模态框 -->
    <div class="modal fade" id="modal_reject" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">驳回策略</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%;display: none">
                        <input id="ruleid">
                    </div>
                    <div style="margin-top:3%">
                        <label>驳回原因</label>
                        <input class="opts" id="auditmsg" name="auditmsg" type="text" placeholder="驳回原因">
                        <div id="auditmsg_spaninfo" class="input-validation"></div>
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="fad_reject()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="approval" sid="" class="btn-confirm btn-stc" onclick="sub(gets)">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 操作成功模态框-->
    <div class="modal fade" data-backdrop="static" id="oper_success">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="title_success"></h4>
                </div>
                <div class="modal-body">
                    <div>
                        <p id="msg_success" class="operat-success">
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <body>
    <section>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-check" onclick="tabs(1)" data-toggle="tab">仿真策略审批</a>
                </li>
            </ul>
            <div class="tab-content">
                <!--仿真审批-->
                <div class="tab-pane active" id="fa-check">
                    <div class="div-query">
                        <div class="lbl-query"><span>策略ID</span>
                            <input class="input-query" type="text" id="astgid">
                        </div>
                        <div class="lbl-query"><span>策略名称</span>
                            <input class="input-query" type="text" id="astgname">
                        </div>
                        <div class="lbl-query"><span>策略状态</span>
                            <select class="input-query" id="auditstatus">
                                <option value=""></option>
                                <option value="1">待审批</option>
                                <option value="2">审批驳回</option>
                                <option value="3">审批通过</option>
                            </select></div>
                        <div class="lbl-query">
                            <button class="btn-query" onclick="uploadsearch()">查询
                            </button>
                        </div>
                    </div>
                    <table class="stc-" id="UploadTable">
                    </table>
                </div>
            </div>
        </div>
    </section>
    </body>

{% endblock %}

{% block scripts %}
    <script type="text/javascript">

        $(function () {
            uploadsearch()
        })

        //驳回原因
        function gets() {
            data = {
                'auditmsg': JSON.stringify([$('#auditmsg').val()]),
            }
            return data;
        }

        //驳回逻辑
        function sub(func) {

            data = func();
            d = $("#ruleid").val();
            //对提交的数据进行遍历，json解析成数组取第一个值，然后取Bool值，
            // 如果是false(空)，则alert，并且返回空，不继续执行下面代码
            for (let key in data) {
                var item = JSON.parse(data[key])[0]
                if (Boolean(item) == false && key != 'id') {
                    var title = $("#" + key).prev().text()
                    $('#auditmsg_spaninfo').text('驳回原因不能为空');
                    return
                } else if (key === 'auditmsg') {
                    if (item.length > 25) {
                        $('#auditmsg_spaninfo').text('驳回原因超过最大长度');
                        return;
                    }
                }
            }
            fad_reject()
            loadon()
            $.post("{% url 'trade:paper_approval' %}", {'data': data, 'id': d}, function (r) {
                loadoff()
                $("#title_success").text("驳回")
                $("#UploadTable").bootstrapTable("destroy").bootstrapTable({
                    height: 600,
                    columns: [
                        {
                            checkbox: true,
                            visible: false
                        },
                        {
                            field: 'stgid',
                            width: 80,
                            title: '策略ID'
                        }, {
                            field: 'stgname',
                            width: 80,
                            title: '策略名称'
                        }, {
                            field: 'createtime',
                            title: '上传时间',
                            width: 80,
                        }, {
                            field: 'auditstatus',
                            title: '审批状态',
                            width: 60,
                        }, {
                            field: 'approval_option',
                            title: '操作',
                            width: 80,
                            formatter: function (value, row, index) {
                                if (row.auditstatus === "待审批") {
                                    var approva = "<span onclick=\"_approval('" + value + "','" + row.stgname +
                                        "')\" class='btn btn-primary btn-xs btn-flat btn_operation' data-toggle='modal' id='appro'><i class='fa fa-check-circle-o'></i> 审批</span>"
                                    var rejec = "&nbsp;<span onclick=\"_reject('" + value + "')\" class='btn btn-danger" +
                                        " btn-xs btn-flat btn_operation' data-toggle='modal' id='rejec'> <i class='fa fa-ban'></i> 驳回</span> "
                                } else {
                                    var approva = '';
                                    var rejec = '';
                                    // var approva = "<span class='btn btn-success " +
                                    //     "btn-xs btn-flat btn_operation' data-toggle='modal' id='appro' disabled='disabled'><i class='fa fa-pencil'></i>审批</span>"
                                    // var rejec = "&nbsp;<span class='btn btn-danger" +
                                    //     " btn-xs btn-flat btn_operation' data-toggle='modal' id='rejec' disabled='disabled'> <i class='fa fa-pencil'></i>驳回</span> "
                                }
                                return approva + rejec;

                            }

                        }, {
                            field: 'updatetime',
                            title: '审批时间',
                            width: 80,
                        }, {
                            field: 'auditmsg',
                            title: '驳回原因',
                            width: 200,
                        }
                    ],
                    data: r,
                    // height: 600,
                    // width: 100,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 100],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "left"
                    //******前端分页设置****
                });
                if (r) {
                    $("#msg_success").text("驳回成功！")
                } else {
                    $("#msg_success").text("服务器错误！")
                }
                $("#oper_success").modal("show");
                setTimeout(function () {
                    $("#oper_success").modal("hide");
                }, 2000)
            });
        }

        //驳回模态框取消
        function fad_reject() {
            $('#modal_reject').modal('hide');
            $("#auditmsg").val("");
            $('#auditmsg_spaninfo').text('');
            $("#ruleid").val("")
        }

        //驳回模态框展示
        function _reject(d) {
            $("#auditmsg").val("");
            $('#auditmsg_spaninfo').text('');
            $('#modal_reject').modal('show');
            $("#ruleid").val(d)
        };

        //审批模态框取消
        function fad_approval() {
            $('#modal_approval').modal('hide');
        }


        //审批模态框展示
        function _approval(d, stgname) {
            $('#modal_approval').modal('show');
            $("#confirm").text("确认审批 " + "'" + stgname + "'" + " 策略?");
            $('#approval').attr('sid', d);
        }

        //审批逻辑
        function stg_approval() {
            d = $('#approval').attr('sid');
            fad_approval()
            loadon()
            $.post("{% url 'trade:paper_approval' %}", {'id': d, 'approval': 1}, function (r) {
                loadoff()
                $("#title_success").text("审批")
                $("#UploadTable").bootstrapTable("destroy").bootstrapTable({
                    height: 600,
                    columns: [
                        {
                            checkbox: true,
                            visible: false
                        },
                        {
                            field: 'stgid',
                            width: 80,
                            title: '策略ID'
                        }, {
                            field: 'stgname',
                            width: 80,
                            title: '策略名称'
                        }, {
                            field: 'createtime',
                            title: '上传时间',
                            width: 80,
                        }, {
                            field: 'auditstatus',
                            title: '审批状态',
                            width: 60,
                        }, {
                            field: 'approval_option',
                            title: '操作',
                            width: 80,
                            formatter: function (value, row, index) {
                                if (row.auditstatus === "待审批") {
                                    var approva = "<span onclick=\"_approval('" + value + "','" + row.stgname +
                                        "')\" class='btn btn-primary btn-xs btn-flat btn_operation' data-toggle='modal' id='appro'><i class='fa fa-check-circle-o'></i> 审批</span>"
                                    var rejec = "&nbsp;<span onclick=\"_reject('" + value + "')\" class='btn btn-danger" +
                                        " btn-xs btn-flat btn_operation' data-toggle='modal' id='rejec'> <i class='fa fa-ban'></i> 驳回</span> "
                                } else {
                                    var approva = '';
                                    var rejec = '';
                                }
                                return approva + rejec;

                            }

                        }, {
                            field: 'updatetime',
                            title: '审批时间',
                            width: 80,
                        }, {
                            field: 'auditmsg',
                            title: '驳回原因',
                            width: 200,
                        }
                    ],
                    data: r,
                    // height: 600,
                    // width: 100,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 100],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "left"
                    //******前端分页设置****
                });
                if (r) {
                    $("#msg_success").text("审批成功！")
                } else {
                    $("#msg_success").text("服务器错误！")
                }
                $("#oper_success").modal("show");
                setTimeout(function () {
                    $("#oper_success").modal("hide");
                }, 2000)
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };

        //查询
        function uploadsearch() {
            var astgid = $("#astgid").val();
            var astgname = $("#astgname").val();
            var auditstatus = $("#auditstatus").val();
            // 整理发送后台的数据
            var data = {
                "stgid": astgid,
                "stgname": astgname,
                "auditstatus": auditstatus
            };

            var JsonData = JSON.stringify(data);
            $.post("{% url 'trade:paper' %}", {"data": JsonData, 'paper_approval_search': 1}, function (r) {
                $("#UploadTable").bootstrapTable("destroy").bootstrapTable({
                    height: 600,
                    columns: [
                        {
                            checkbox: true,
                            visible: false
                        },
                        {
                            field: 'stgid',
                            width: 80,
                            title: '策略ID'
                        }, {
                            field: 'stgname',
                            width: 80,
                            title: '策略名称'
                        }, {
                            field: 'createtime',
                            title: '上传时间',
                            width: 80,
                        }, {
                            field: 'auditstatus',
                            title: '审批状态',
                            width: 60,
                        }, {
                            field: 'approval_option',
                            title: '操作',
                            width: 80,
                            formatter: function (value, row, index) {
                                if (row.auditstatus === "待审批") {
                                    var approva = "<span onclick=\"_approval('" + value + "','" + row.stgname +
                                        "')\" class='btn btn-primary btn-xs btn-flat btn_operation' data-toggle='modal' id='appro'><i class='fa fa-check-circle-o'></i> 审批</span>"
                                    var rejec = "&nbsp;<span onclick=\"_reject('" + value + "')\" class='btn btn-danger" +
                                        " btn-xs btn-flat btn_operation' data-toggle='modal' id='rejec'> <i class='fa fa-ban'></i> 驳回</span> "
                                } else {
                                    var approva = '';
                                    var rejec = '';
                                    // var approva = "<span class='btn btn-success " +
                                    //     "btn-xs btn-flat btn_operation' data-toggle='modal' id='appro' disabled='disabled'><i class='fa fa-pencil'></i>审批</span>"
                                    // var rejec = "&nbsp;<span class='btn btn-danger" +
                                    //     " btn-xs btn-flat btn_operation' data-toggle='modal' id='rejec' disabled='disabled'> <i class='fa fa-pencil'></i>驳回</span> "
                                }
                                return approva + rejec;

                            }

                        }, {
                            field: 'updatetime',
                            title: '审批时间',
                            width: 80,
                        }, {
                            field: 'auditmsg',
                            title: '驳回原因',
                            width: 200,
                        }
                    ],
                    data: r,
                    // height: 600,
                    // width: 100,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 100],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "left"
                    //******前端分页设置****
                });
            });

        }

    </script>

{% endblock %}